<template>
	<div id="app">
		<el-row>
			<el-col :span="4">
				<div class="width_90 margin_top_10">
					<div class="width_100 padding_bottom_10 border_bottom">
						<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
					</div>
					<el-tree class='tree_list margin_top_10' :data="treeData" node-key="idx" default-expand-all
						:expand-on-click-node="false">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span>{{ node.label }}</span>
							<el-dropdown @command="(e) => commandFn(e, data)">
								<span class="el-dropdown-link"><i class="el-icon-more el-icon--right"></i></span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="add">添加</el-dropdown-item>
									<el-dropdown-item command="edit">编辑</el-dropdown-item>
									<el-dropdown-item command="del">删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</span>
					</el-tree>
				</div>
			</el-col>
			<el-col :span="20">
				<div class="width_100 list">
					<el-row class="width_98 display_flex align_items_center padding_10 border_bottom">
						<el-col :span="24" class="font_size_26">添加成员</el-col>
					</el-row>
				</div>

				<el-form class="width_96 demo-ruleForm" label-width="130px">
					<el-row>
						<el-col :span="12">
							<el-row class="width_100">
								<el-col :span="20">
									<el-form-item label="成员姓名：" prop="name">
										<el-input placeholder="请输入成员姓名" v-model="form.name"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="20">
									<el-form-item label="成员手机：" prop="name">
										<el-input placeholder="请输入成员手机" v-model="form.name"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="20">
									<el-form-item label="设置密码：" prop="name">
										<el-input placeholder="请设置密码" v-model="form.name"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span='12' class="text_align_center margin_top_10">
							<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
								:show-file-list="false" :on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar">
								<img v-else src="../../../assets/images/organization/pic_4.png" class="avatar" alt="">
							</el-upload>
							<span class="font_size_12 color_A3A3A3">请上传jpg/png格式图片图片大小不超过2M</span>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="归属部门：" prop="name">
								<div class="width_100 display_flex align_items_center">
									<div class="select_bm" v-for="(item,index) in SetDepartment">
										<span>{{item.label}}</span>
										<i @click="pop_node_del_click(index)" class="el-icon-error"></i>
									</div>
									<span class="margin_left_10 cursor_pointer" style="color:#0067D9;font-size:12px;"
										@click='sz_generate_FUN()'>设置</span>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="部门负责人：" prop="name">
								<el-radio-group v-model="form.radio">
									<el-radio :label="3">是</el-radio>
									<el-radio :label="6">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<div class='xx'></div>
					<el-row>
						<el-col :span="10">
							<el-form-item label="分润比例：" prop="name">
								<el-input-number v-model="form.num" @change="handleChange" :min="1" :max="10"
									label="描述文字"></el-input-number>
								<el-tooltip class="item" effect="dark" content="比例设置范围是1~100之间的正整数" placement="right">
									<span class="margin_left_10" style="color:red;font-size:12px;">设置提示</span>
								</el-tooltip>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="菜单权限：" prop="name">
								<span @click="drawer_status=true;" class="margin_left_10"
									style="color:#0067D9;font-size:12px;">设置</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="结算成本：" prop="name">
								<span @click='set_chengben_status=true;' class="margin_left_10"
									style="color:#0067D9;font-size:12px;">设置</span>
							</el-form-item>
						</el-col>
					</el-row>
					<div class='xx'></div>
					<el-row>
						<el-col :span="12">
							<el-row>
								<el-col :span="24">
									<el-form-item label="银行名称：" prop="name">
										<el-select class="width_100" v-model="form.bank_name">
											<el-option value="1" label="1"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<el-form-item label="支行名称：" prop="name">
										<el-input placeholder="请设置支行名称" v-model="form.name"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<el-form-item label="账户户名：" prop="name">
										<el-input placeholder="请输入账户户名" v-model="form.name"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<el-form-item label="身份证号：" prop="name">
										<el-input placeholder="请输入身份证号" v-model="form.name"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<el-form-item label="证件资料：" prop="name">
										<el-row class="text_align_center">
											<el-col :span="8">
												<el-upload class="avatar-uploader"
													action="https://jsonplaceholder.typicode.com/posts/"
													:show-file-list="false" :on-success="handleAvatarSuccess"
													:before-upload="beforeAvatarUpload">
													<img v-if="imageUrl" :src="imageUrl" class="avatar">
													<img v-else src="../../../assets/images/organization/pic_3.png"
														class="avatar" alt="">
												</el-upload>
											</el-col>
											<el-col :span="8">
												<el-upload class="avatar-uploader"
													action="https://jsonplaceholder.typicode.com/posts/"
													:show-file-list="false" :on-success="handleAvatarSuccess"
													:before-upload="beforeAvatarUpload">
													<img v-if="imageUrl" :src="imageUrl" class="avatar">
													<img v-else src="../../../assets/images/organization/pic_2.png"
														class="avatar" alt="">
												</el-upload>
											</el-col>
											<el-col :span="8">
												<el-upload class="avatar-uploader"
													action="https://jsonplaceholder.typicode.com/posts/"
													:show-file-list="false" :on-success="handleAvatarSuccess"
													:before-upload="beforeAvatarUpload">
													<img v-if="imageUrl" :src="imageUrl" class="avatar">
													<img v-else src="../../../assets/images/organization/pic_1.png"
														class="avatar" alt="">
												</el-upload>
											</el-col>

										</el-row>
										<div class="font_size_12 color_A3A3A3">提示：支持jpg/png/jpeg格式，建议尺寸640px×640px</div>
									</el-form-item>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="12">
							<div class="width_90 text_align_center ">
								<img src="../../../assets/images/organization/bg.png" class="width_90 margin_top_20"
									alt="">
							</div>
						</el-col>
					</el-row>
					<div class="btn_group">
						<el-button class="btn_no" @click="set_chengben_status = false">取 消</el-button>
						<el-button class="btn_yes" @click="set_chengben_status = false">保 存</el-button>
					</div>
				</el-form>


			</el-col>
		</el-row>
		<div class="box_height"></div>

		<el-dialog title="选择成员所在部门" class="ee_box" :visible.sync="dialogVisible" :show-close='false' width="50%">
			<div class="width_100">
				<el-row class="width_90">
					<el-col :span="12">
						<div class=" e_box_left">
							<div class="width_90 text_align_center margin_top_20">
								<el-input placeholder="搜索部门" prefix-icon="el-icon-search"></el-input>
							</div>
							<div class="width_96" style='max-height: 340px;overflow: auto;'>
								<el-tree class='tree_list margin_top_10' :data="treeData" node-key="ida"
									default-expand-all :expand-on-click-node="false" @node-click="pop_node_click">
									<span class="custom-tree-node" slot-scope="{ node, data }">
										<img :src="icon_1" class='tree_icon' alt="">
										<div style="flex:1;text-align: left;" class="margin_left_10">
											<span>{{ node.label }}</span>
										</div>
									</span>
								</el-tree>
							</div>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="e_box_right">
							<div class="width_90  margin_top_20">已选择的部门</div>

							<div class="width_96 margin_top_10" style='max-height: 330px;overflow: auto;'>
								<div class="width_90 display_flex align_items_center padding_6 background_DDEDFF"
									v-for="(item,index) in SetDepartment">
									<img :src="icon_1" class='tree_icon' alt="">
									<div class="flex_1 margin_left_10">{{item.label}}</div>
									<div class="icon_2" @click="pop_node_del_click(index)">
										<i class="el-icon-close"></i>
									</div>
								</div>
							</div>
						</div>

					</el-col>
				</el-row>
			</div>
			<div class="btn_group">
				<el-button class="btn_no" @click="dialogVisible = false">取 消</el-button>
				<el-button class="btn_yes" @click="dialogVisible = false">保 存</el-button>
			</div>
		</el-dialog>

		<el-dialog title="选择成员所在部门" class="ee_box" :visible.sync="drawer_status" :show-close='false' width="50%">
			<div class="width_90 margin_top_10">
				<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
			</div>
			<div class="width_90" style='height: 340px;overflow: auto;'>
				<el-tree class='tree_list margin_top_10' :data="treeData" node-key="ida" default-expand-all
					:expand-on-click-node="false" show-checkbox @node-click="pop_node_click">
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<img :src="icon_1" class='tree_icon' alt="">
						<div style="flex:1;text-align: left;" class="margin_left_10">
							<span>{{ node.label }}</span>
						</div>
					</span>
				</el-tree>
			</div>
			<div class="width_90">
				<div class="btn_group">
					<el-button class="btn_no" @click="drawer_status = false">取 消</el-button>
					<el-button class="btn_yes" @click="drawer_status = false">保 存</el-button>
				</div>
			</div>
		</el-dialog>

		<el-dialog title="设置结算成本" class="ee_box" :visible.sync="set_chengben_status" :show-close='false' width="90%">
			<div class="width_90">
				<div class="display_flex align_items_center">
					<div>*结算成本：</div>
					<div class="select_bm" v-for="(item,index) in SetDepartment">
						<span>{{item.label}}</span>
						<i @click="pop_node_del_click(index)" class="el-icon-error"></i>
					</div>
				</div>
			</div>
			<div class="width_90">
				<el-table :data="tableData" style="width: 100%;height:400px;">
					<el-table-column prop="date" label="序号"></el-table-column>
					<el-table-column prop="name" label="通道名称"></el-table-column>
					<el-table-column prop="address" label="支付宝费率(%)"></el-table-column>
					<el-table-column prop="address" label="微信费率(%)"></el-table-column>
					<el-table-column prop="address" label="银联借记卡(≤1000元)费率(%)"></el-table-column>
					<el-table-column prop="address" label="银联借记卡(＞1000元)费率(%)"></el-table-column>
					<el-table-column prop="address" label="银联借记卡封顶额(元)"></el-table-column>
					<el-table-column prop="address" label="银联贷记卡(≤1000元)费率(%)"></el-table-column>
					<el-table-column prop="address" label="银联贷记卡(＞1000元)费率(%)"></el-table-column>
					<el-table-column prop="address" label="操作"></el-table-column>
				</el-table>
			</div>
			<div class="btn_group">
				<el-button class="btn_no" @click="set_chengben_status = false">取 消</el-button>
				<el-button class="btn_yes" @click="set_chengben_status = false">保 存</el-button>
			</div>
		</el-dialog>

	</div>
</template>


<script>
	import {
		get,
		post,
		formatterCellval,
		pickerOptions,
		tipsFun
	} from '../../../util/request.js';
	import {
		icon_1
	} from '../../../util/icon.js';
	export default {
		name: '',
		data() {
			var treeData = [{
				id: 1,
				label: '一级 1',
				children: [{
					id: 4,
					label: '二级 1-1',
					children: [{
						id: 9,
						label: '三级 1-1-1'
					}, {
						id: 10,
						label: '三级 1-1-2'
					}]
				}]
			}, {
				id: 1,
				label: '一级 1',
				children: [{
					id: 4,
					label: '二级 1-1',
					children: [{
						id: 9,
						label: '三级 1-1-1'
					}, {
						id: 10,
						label: '三级 1-1-2'
					}]
				}]
			}, {
				id: 1,
				label: '一级 1',
				children: [{
					id: 4,
					label: '二级 1-1',
					children: [{
						id: 9,
						label: '三级 1-1-1'
					}, {
						id: 10,
						label: '三级 1-1-2'
					}]
				}]
			}];
			const generateData = _ => {
				const data = [];
				for (let i = 1; i <= 15; i++) {

					data.push({
						key: i,
						label: `备选项 ${ i }`,
						disabled: i % 4 === 0,
						data: {
							key: i,
							label: `备选项 ${ i }`,
							disabled: i % 4 === 0,
						}
					});
				}
				return data;
			};
			return {
				icon_1: icon_1,
				treeData: JSON.parse(JSON.stringify(treeData)),
				formatterCellval,
				filterText: '',
				time: "",
				pickerOptions,
				input2: '',
				currentPage: 1,
				pageTotal: 0,
				form: {
					radio: 3,
				},
				sub_title: "",
				dialogVisible: false,
				value: '',
				data: generateData(),
				generateValue: [1, 4],
				imageUrl: "",
				SetDepartment: [],
				drawer_status: false,
				direction: 'rtl',

				//结算成本
				set_chengben_status: false,
				tableData: []
			}
		},
		mounted() {

		},
		methods: {
			commandFn(res, e) {
				console.log(res, e);
				if (res == 'add') {
					this.sub_title = '新增部门';
					this.dialogVisible = true;
				} else if (res == 'edit') {
					this.sub_title = '修改部门';
					this.dialogVisible = true;
				} else if (res == 'del') {
					console.log(res, e);
					this.$confirm('确定删除' + e.label + '部门？', '删除部门', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}

			},
			treeClickFn() {

			},
			//分润比例
			handleChange() {

			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			sz_generate_FUN() {
				this.dialogVisible = true;
			},
			filterNode(res) {
				console.log(res);
			},
			pop_node_click(res) {
				var str = false;
				this.SetDepartment.forEach((data) => {
					if (data.id == res.id) {
						tipsFun(this, 'error', '已存在');
						str = true;
					}
				})
				if (!str) {
					this.SetDepartment.push(res);
				}
			},
			pop_node_del_click(index) {
				this.SetDepartment.splice(index, 1);
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}


		}
	}
</script>

<style scoped='true'>
	.tree_list>>>.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}

	.tree_list>>>.el-tree-node__content:hover {
		background-color: #ECF2FE !important;
	}

	.list>>>.font_size_26 {
		font-size: 22px;
	}

	.list>>>.tab_title {
		font-size: 12px;
		color: #0067D9;
	}

	.list>>>.tab_title div {
		margin-right: 10px;
	}

	.small_box>>>.list {
		padding: 10px 0;
	}

	.box {
		padding: 10px;
		border-radius: 6px;
		background-color: rgba(236, 242, 254, 1);
	}

	.el-form-item--small.el-form-item {
		margin-bottom: 0px !important;
		margin-top: 10px !important;
	}

	.el-form-item__content {
		margin-left: 0px !important;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9 !important;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 98px;
		height: 98px;
		line-height: 98px;
		text-align: center;
		border: 1px dashed #d9d9d9 !important;
		border-radius: 6px;
	}

	.avatar {
		width: 98px;
		height: 98px;
		display: block;
	}

	.select_bm {
		padding: 2px 10px;
		border-radius: 6px;
		border: 1px solid #F5F5F5;
		color: #575757;
		margin-right: 10px;
		background: #DDEDFF;
	}

	.select_bm i {
		color: #D9D9D9;
	}

	.e_box_left {
		border-right: 1px solid #E1E1E1;
		border-top: 1px solid #E1E1E1;
		border-bottom: 1px solid #E1E1E1;
		height: 400px;
	}

	.e_box_right {
		border-top: 1px solid #E1E1E1;
		border-bottom: 1px solid #E1E1E1;
		height: 400px;
	}

	.ee_box>>>.el-dialog__body {
		padding: 0 !important;
	}

	.tree_icon {
		width: 14px;
		height: 14px;
	}

	.icon_2 {
		font-size: 16px;
	}

	.background_DDEDFF {
		background: #DDEDFF;
		margin-top: 10px;
		border-radius: 8px;
	}
</style>